<template>
	<view>
		<!-- #ifndef APP-PLUS -->
		<uni-nav-bar :shadow="false" :fixed="true" :border="false" right-text="菜单" @click-right="clickNavigationButton">
		</uni-nav-bar>
		<!-- #endif -->
		<!-- 头部 -->
		<view class="flex align-center px-2 py-3 border-bottom">
			<image :src="userinfo.userpic" style="width: 180rpx; height: 180rpx;" class="rounded-circle mr-2">
			</image>
			<view class="flex-1 flex flex-column align-center">
				<view class="flex w-100">
					<view class="flex-1 flex flex-column justify-center align-center" v-for="(item,index) in counts">
						<view class="font-md font-weight-bold">{{item.num}}</view>
						<view>{{item.name}}</view>
					</view>

				</view>
				<view v-if="user.id == user_id" class="p-1 mt-1 text-center rounded text-dark bg-light"
					style="width: 80%;" @click="openEdit">
					编辑资料
				</view>
				<view v-else class="p-1 mt-1 text-center rounded" style="width: 80%;"
					:class="userinfo.isFollow ? 'text-dark bg-light' : 'text-white bg-main'" @click="doFollow">
					{{userinfo.isFollow ? '取消关注' : '关注'}}
				</view>

			</view>
		</view>
		<!-- tab -->
		<view class="flex">
			<view v-for="(item,index) in tabbars" :key="index"
				class="flex-1 flex justify-center align-center py-2 font font-weight-bold"
				:class="index === tabIndex ? 'text-main font-md ': ''" @click="changeTab(index)">{{item.name}}
			</view>
		</view>
		<!-- content -->
		<view>
			<template v-if="tabIndex === 0">
				<view class="animated fast fadeIn">
					<view class="p-4 border-bottom">
						<view class="font-md mb-2">账号信息</view>
						<view class="mb-1">创建日期 : {{userinfo.regtime}}</view>
						<view>账号ID : {{user_id}}</view>
					</view>
					<view class="p-4 border-bottom">
						<view class="font-md mb-2">个人信息</view>
						<view class="mb-1">星座 : {{userinfo.birthday}}</view>
						<view class="mb-1">职业 : {{userinfo.job}}</view>
						<view class="mb-1">故乡 : {{userinfo.path}}</view>
						<view>情感: {{userinfo.qg |formateQg}}</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="animated fast fadeIn">
					<view v-for="(item,index) in list">
						<commonList :item="item" :index="index" @follow='follow' @dosupport="dosupport"></commonList>
					</view>
					<divider></divider>
					<!-- 上拉加载更多 -->
					<loadMore :loadMore="loadMore" v-if="list.length"></loadMore>
				</view>
			</template>
		</view>

		<!-- 弹出层 -->
		<uniPopup ref="popup" type="top">
			<view class="flex justify-center align-center py-2 font-md border" hover-class="bg-light" @click="doBlack">
				<text class="iconfont icon-sousuo mr-1"></text>{{userinfo.isblack ? '移出黑名单' : '加入黑名单'}}
			</view>
			<view v-if="!userinfo.isblack" class="flex justify-center align-center py-2 font-md border"
				hover-class="bg-light" @click="openchart">
				<text class="iconfont icon-qingchu mr-1"></text>聊天
			</view>
		</uniPopup>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	import commonList from '@/components/common/common-list.vue';
	import loadMore from '@/components/common/loadmore.vue'
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue'
	import $T from '@/common/time.js'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			commonList,
			loadMore,
			uniPopup,
			uniNavBar
		},
		data() {
			return {
				tabbars: [{
						name: "主页",
					},
					{
						name: "帖子",
						list: [],
						page: 1,
						loadMore: "上拉加载更多"
					},
					{
						name: "动态",
						list: [],
						page: 1,
						loadMore: "上拉加载更多"
					}
				],
				tabIndex: 0,
				user_id: 0,
				userinfo: {
					userpic: '/static/default.jpg',
					username: "",
					sex: 0,
					age: 0,
					isFollow: false,
					isblack: false,
					regtime: "",
					birthday: "",
					job: "",
					path: "",
					qg: ""
				},
				counts: [{
					name: "获赞",
					num: 0
				}, {
					name: "关注",
					num: 0
				}, {
					name: "粉丝",
					num: 0
				}, ],
				//跳转聊天
				userdata: {}

			}
		},
		onNavigationBarButtonTap() {
			if (this.user.id == this.user_id) {
				return uni.navigateTo({
					url: '../user-userinfo/user-userinfo',
				});
			}
			this.$refs.popup.open()
		},
		onLoad(e) {
			let user = JSON.parse(e.user)
			if (!user.user_id) {
				uni.showToast({
					title: '非法参数',
					icon: "none"
				});
			}
			this.user_id = user.user_id
			this.userdata = user
			console.log(this.userdata)
			uni.$on('updateFolloworSurpport', (e) => {
				switch (e.type) {
					case 'follow':
						this.follow(e.user_id)
						break;
					case 'support':
						this.dosupport(e.data)
						break;
					default:
						break;
				}
			})
			uni.$on('updateInfo', (e) => {
				this.getUserSpace()
			})
			this.getUserSpace()
			this.getCounts()
		},
		onUnload() {
			uni.$off('updateFolloworSurpport', (e) => {})
			uni.$off('updateList', (e) => {})
			uni.$off('updateInfo', (e) => {})
		},
		onReachBottom() {
			if (this.tabbars.list) {
				this.loadmore()
			}
		},
		computed: {
			list() {
				return this.tabbars[this.tabIndex].list
			},
			loadMore() {
				return this.tabbars[this.tabIndex].loadMore
			},
			...mapState({
				user: state => state.userinfo
			})
		},
		filters: {
			formateQg(value) {
				switch (value) {
					case 0:
						return '保密'
						break;
					case 1:
						return '已婚'
						break;
					case 2:
						return '未婚'
						break;
					case '暂无':
						return '暂无'
						break;
					default:
						break;
				};
			}
		},
		methods: {
			// #ifndef APP-PLUS
			clickNavigationButton() {
				if (this.user.id == this.user_id) {
					return uni.navigateTo({
						url: '../user-userinfo/user-userinfo',
					});
				}
				this.$refs.popup.open()
			},
			// #endif
			changeTab(index) {
				this.tabIndex = index
				this.getList()
			},
			//关注
			follow(e) {
				this.tabbars.forEach((tab => {
					if (tab.list) {
						tab.list.forEach(v => {
							if (v.user_id === e) {
								v.isFollow = true
							}
						})
					}
				}))
				uni.showToast({
					title: '关注成功'
				});
			},
			//点赞取消点赞操作
			dosupport(e) {
				this.tabbars[this.tabIndex].list.forEach(item => {
					if (item.id === e.id) {
						if (item.support.type === '') {
							item.support.type = e.type
							item.support[e.type + '_count']++
						} else if (item.support.type === 'support' && e.type === 'unsupport') {
							item.support.support_count--
							item.support.unsupport_count++
						} else if (item.support.type === 'unsupport' && e.type === 'support') {
							item.support.support_count++
							item.support.unsupport_count--
						}
						item.support.type = e.type
					}
				})
				uni.showToast({
					title: e.type === 'support' ? '喜欢' : "不喜欢"
				});
			},
			//关注取消关注
			doFollow() {
				this.checkAuth(() => {
					let url = this.userinfo.isFollow ? '/unfollow' : '/follow'
					let msg = this.userinfo.isFollow ? '取消关注' : '关注'
					this.$H.post(url, {
						follow_id: this.user_id
					}, {
						token: true
					}).then(res => {
						this.userinfo.isFollow = !this.userinfo.isFollow
						uni.showToast({
							title: msg + '成功',
							icon: 'none'
						});
						// uni.$emit('updateList')
						uni.$emit('updateList')
						this.getList()
					})
				})
			},
			//获取用户个人信息
			getUserSpace() {
				this.$H.post('/getuserinfo', {
					user_id: this.user_id
				}, {
					token: true,
					notoast: true
				}).then(res => {
					this.userinfo = {
						userpic: res.userpic ? res.userpic : '/static/default.jpg',
						username: res.username,
						sex: res.sex,
						age: res.age,
						isFollow: res.fens.length > 0,
						isblack: res.blacklist.length > 0,
						regtime: $T.dateFormat(new Date(res.create_time * 1000), '{Y}-{MM}-{DD}'),
						birthday: $T.getHoroscope(res.userinfo.birthday),
						job: res.userinfo.job ? res.userinfo.job : '暂无',
						path: res.userinfo.path ? res.userinfo.path : '暂无',
						qg: res.userinfo.qg ? res.userinfo.qg : '暂无'
					}
				})
			},
			// 获取粉丝关注获赞数量
			getCounts() {
				this.$H.get('/user/getcounts/' + this.user_id).then(res => {
					if (res) {
						this.counts[0].num = res.post_count
						this.counts[1].num = res.withfollow_count
						this.counts[2].num = res.withfen_count
					}
				})
			},
			//获取列表
			getList() {
				let index = this.tabIndex
				if (index === 0) return;
				let page = this.tabbars[index].page
				let isrefensh = page === 1
				this.$H.get('/user/' + this.user_id + '/post/' + page).then(res => {
					let list = res.list.map(v => {
						return this.$U.formatCommonList(v)
					})
					this.tabbars[index].list = isrefensh ? list : [...this.tabbars[index].list, ...list],
						this.tabbars[index].loadMore = list.length < 10 ? '没有更多了' : '上拉加载更多'
				}).catch(err => {
					if (!isrefresh) {
						this.tabBars[index].page--
					}
				})
			},
			//上拉加载更多
			loadmore() {
				if (!this.tabbars[this.tabIndex].loadMore !== '上拉加载更多') return;
				this.tabbars[this.tabIndex].loadMore = '加载中'
				this.tabbars[this.tabIndex].page++
				this.getList()
			},
			//编辑资料
			openEdit() {
				uni.navigateTo({
					url: '../user-userinfo/user-userinfo'
				});
			},
			//加入黑名单
			doBlack() {
				this.checkAuth(() => {
					let url = this.userinfo.isblack ? '/removeblack' : '/addblack'
					let msg = this.userinfo.isblack ? '移出黑名单' : '加入黑名单'
					uni.showModal({
						title: '是否要' + msg,
						cancelText: '否',
						confirmText: '是',
						success: res => {
							if (res.confirm) {
								this.$H.post(url, {
									id: this.user_id
								}, {
									token: true
								}).then(res => {
									this.userinfo.isblack = !this.userinfo.isblack
									uni.showToast({
										title: msg + '成功',
										icon: 'none'
									});
									this.$refs.popup.close()
								})
							} else if (res.cancel) {
								this.$refs.popup.close()
								console.log('用户点击取消');
							}

						},
						fail: () => {
							uni.showToast({
								title: '',
								icon: 'none'
							});
						}
					});
				})
			},
			//进入聊天
			openchart() {
				let user = {
					user_id: this.user_id,
					username: this.userinfo.username,
					userpic: this.userinfo.userpic
				}
				this.navigateTo({
					url: '../user-chart/user-chart?user=' + JSON.stringify(user),
				})
				this.$store.dispatch('readChatMessage', user)
			}
		}
	}
</script>

<style>

</style>
